<template>
    <div>
        <home-header></home-header>
        <home-swiper :list = 'swiperList'></home-swiper>
        <home-icons :list = 'iconList'></home-icons>
        <recommend :list = 'recommendList'></recommend>
        <weekend :list = 'weekendList'></weekend>
    </div>
</template>

<script>
import homeHeader from './components/homeHeader'
import homeSwiper from './components/homeSwiper'
import homeIcons from './components/homeIcons'
import recommend from './components/recommend'
import weekend from './components/weekend'
import axios from 'axios'
import {mapState} from 'vuex'
export default {
components: {
    homeHeader,
    homeSwiper,
    homeIcons,
    recommend,
    weekend
},
data () {
    return {
        swiperList :[],
        iconList : [],
        recommendList: [],
        weekendList: [],
        lastCity: ''
    }
},
computed: {
    ...mapState(['city'])
},
methods: {
    getHomeInfo() {
        axios.get('/api/index.json?city='+this.city)
            .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc(res) {
        res = res.data
        console.log(res)
        if(res.data && res.ret) {
            const data = res.data
            this.swiperList = data.swiperList
            this.iconList = data.iconList
            this.recommendList = data.recommendList
            this.weekendList = data.weekendList
        }
    }
},
mounted (){
    this.lastCity = this.city
    this.getHomeInfo()
},
actiivated() {
    if(this.lastCity != this.city) {
        this.lastCity = this.city
        this.getHomeInfo()
    }
}
}
</script>

<style>

</style>
